<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="app" style="color: rgb(143, 129, 129);font-size: 30px"></div>
    <script>
        const {
            color,
            fontSize
        } = document.getElementById('app')
        console.log(color, fontSize)
    </script>
    <script type="text/babel">
        /* 
         1. 可以是js的表达式, 不能是js的语句
        2. 可以是任意基本类型值, 但null、undefined和布尔值没有任何显示
        3. 可以是一个js数组, 但不能是js对象
        4. 可以是react元素对象
        5. style属性值必须是一个包含样式的js对象

        数组: 会自动遍历数组中的每个元素依次显示出来 
    */
        let title = 'abcd'
        const vDom=(
            <div>
                <h2 title={title}>{title.toUpperCase()}</h2>
                <h3>{123}--{'abc'}</h3>
                <h3>--{null}--{undefined}--{true}--{false}</h3>
                <h3>{['abc',123]}</h3>
                {/* jsx中不能写对象 */}
                {/* <h3>{{a:1,b:'abc'}}</h3> */}
                <h3>{React.createElement('span',null,'我是span')}</h3>
            
                <h3 style={{color:'red',fonSize:'20px'}}>style属性文本</h3>
                <input type='text'/>{/* 必须有结束标签,可以自闭合 */}
                </div>
                //<div></div>  /* 有且只能有一个根标签 */
        )
        //渲染虚拟DOM
        ReactDOM.render(vDom,document.getElementById('app'))
    </script>

</body>

</html>